import React, { useContext, useState, useEffect, useRef } from "react";

import { Context } from "@/context";

import OtherPropsTest from "@/components/otherPropsTest";

import ShadowDOM from "@/components/shadowDOM";

import useHook from "./useHook";

import Com from './com'

class TestTran extends React.Component {
  static contextType = Context; // 定义当前class组件的context数据,也可以直接 TestTran.contextType = Context
  declare context: React.ContextType<typeof Context>; // 定义class组件的context ts类型
  constructor(props: any) {
    super(props);
    this.state = {
      a: 1,
    };
  }
  handleClick = () => {
    // this.setState({ // 异步
    //   a: 10
    // })
    // console.log(this.state.a) // 1
    // 同步(不会合并)
    // setTimeout(() => {
    //   this.setState({
    //     a: 10
    //   })
    //   console.log(this.state.a) // 10
    // }, 0)
    // setTimeout(() => {
    //   this.setState({
    //     a: 101
    //   })
    //   console.log(this.state.a) // 10
    // }, 0)
    // 传入函数不会合并setState
    // this.setState((prevState, props) => {
    //   return {
    //     a: prevState.a + 10
    //   }
    // })
    // this.setState((prevState, props) => {
    //   return {
    //     a: prevState.a + 10
    //   }
    // })
    // console.log(this.state.a)
  };
  componentDidMount() {
    console.log(this.context.contextData.name, 'this.context.contextData.name');
    this.context.dispatch({
      type: "updateName",
      updateValue: { name: "111" },
    })
    // this.handleClick()
    // document.body.addEventListener("click", () => {
    // 同步不合并
    // this.setState({
    //   a: 10,
    // });
    // console.log(this.state.a)
    // this.setState({
    //   a: 101,
    // });
    // console.log(this.state.a)
    // 同步(不会合并)
    // setTimeout(() => {
    //   this.setState({
    //     a: 10,
    //   });
    //   console.log(this.state.a); // 10
    // }, 0);
    // setTimeout(() => {
    //   this.setState({
    //     a: 101,
    //   });
    //   console.log(this.state.a); // 10
    // }, 0);
    // });
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>1231231312</button>
      </div>
    );
  }
}

let time: NodeJS.Timeout;

let a = 0;

export default (): JSX.Element => {
  const { dispatch, contextData } = useContext(Context);

  const [arr, setArr] = useState([1, 2, 3, 4]);

  const [obj, setObj] = useState({ a: 1 });

  const [count, setCount] = useState(0);

  const { pack } = useHook({ data: count.toFixed(0) }); // count没有更新其他state更新了hook内部也会执行但是不会执行effect

  useEffect(() => {
    // count没有更新其他state更新了hook内部也会执行但是不会执行effect
    console.log("更新了吗");
  }, [pack]);

  const countRef = useRef(0);
  // useEffect(() => {
  //   time = setInterval(() => {
  //     console.log(count)
  //     setCount(count + 1)
  //   }, 1000)
  //   return () => clearInterval(time)
  // }, [])
  // useEffect(() => {
  //   time = setInterval(() => {
  //     console.log(a)
  //     setCount(++a);
  //   }, 1000);
  //   return () => clearInterval(time)
  // }, []);
  // useEffect(() => {
  //   time = setInterval(() => {
  //     console.log(countRef.current);
  //     setCount(++countRef.current);
  //     return () => clearInterval(time);
  //   }, 1000);
  // }, []);

  const listenFn = () => {
    // // 异步会合并
    // setObj({ a: 10 });
    // console.log(obj.a);
    // setObj({ a: 101 });
    // console.log(obj.a);
    // // 异步(会合并)
    // setTimeout(() => {
    //   setObj({ a: 10 });
    //   console.log(obj);
    // }, 0);
    // setTimeout(() => {
    //   setObj({ a: 101 });
    //   console.log(obj);
    // }, 0);
  };

  useEffect(() => {
    document.body.addEventListener("click", listenFn);
    return () => {
      document.body.removeEventListener("click", listenFn);
    };
  });

  useEffect(() => {
    console.log("测试useref是否可以触发useEffect"); // 可以触发
  }, [countRef.current]);

  useEffect(() => {
    console.log('主文件更新')
    return () => {
      console.log('主文件卸载')
    }
  }, [])

  return (
    <div>
      <button
        onClick={() => {
          countRef.current = 1000;
          console.log(countRef);
          // arr.push(1) // 不能直接push
          // console.log(arr)
          // setArr(arr)
          // // setArr([...arr]) // 这样是可以的
          // obj.b = 10 // 不能直接赋值
          // console.log(obj)
          // setObj(obj)
          // // setObj({...obj}) // 这样是可以的
          // setObj({a: 10}) // 异步
          // console.log(obj)
          // 异步(会合并)
          setTimeout(() => {
            setObj({ a: 10 });
            console.log(obj);
          }, 0);
          setTimeout(() => {
            setObj({ a: 101 });
            console.log(obj);
          }, 0);
          // 传入函数不会合并setState
          setObj((prevState) => {
            return { a: prevState.a + 1 };
          });
          setObj((prevState) => {
            return { a: prevState.a + 1 };
          });
          console.log(obj);
        }}
      >
        setState{arr}
        {/* @ts-ignore */}
        {obj.b}
      </button>

      <TestTran />

      <Com a={"2"} />
      <Com a={"3"} />

      <button
        onClick={() => {
          dispatch({
            type: "updateName",
            updateValue: {
              name: "改变了",
            },
          });
          setCount(count + 1);
        }}
      >
        {contextData.name}
      </button>
      <OtherPropsTest
        style={{
          color: "red",
          fontSize: 24,
          fontWeight: 700,
        }}
      />
      <ShadowDOM />
    </div>
  );
};
